<template>
  <!-- 公用mv -->
  <div class="mv-list">
    <ul>
      <li v-for="(item,index) in list"
          :key="index"
          :class="{acLi:type==='coverUrl'}"
          @click="toPath(subId(item))">
        <img v-lazy="subImg(item)"
             :key="item.id">
        <div class="num">
          <span class="play">{{(subPlayCount(item))|changeNum }}</span>
          <svg class="icon cc"
               aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
        </div>
        <div class="time"
             v-if="item.data"><span>{{(item.data.playTime)|timeFormat}}</span></div>
        <span>{{ subName(item) }}</span>
        <span style="color:#666666;font-size:12px;margin-top: 0;margin-bottom: 4px;">{{  subAuthor (item) }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    },
    type: {
      type: String,
      required: true,
    }
  },
  methods: {
    // 图片处理
    subImg (item) {
      if (this.type === 'picUrl') return item.picUrl
      else if (this.type === 'cover') return item.cover
      else if (this.type === 'CoverUrl') return item.data.coverUrl
      else if (this.type === 'imgurl') return item.imgurl
      else return item.coverUrl
    },
    //播放量处理
    subPlayCount (item) {
      if (this.type === 'coverUrl') return item.playTime
      else if (this.type === 'CoverUrl') return item.data.durationms
      else return item.playCount
    },
    // 名字处理
    subName (item) {
      if (this.type === 'coverUrl') return item.title
      else if (this.type === 'CoverUrl') return item.data.title
      else return item.name
    },
    // 作者处理
    subAuthor (item) {
      if (this.type === 'coverUrl') {
        let author = item.creator.map((item) => {
          return item.userName
        })
        return author[0]
      } else if (this.type === 'CoverUrl') {
        if (item.data.creator) {
          return item.data.creator.nickname
        }
      }
      else {
        return item.artistName
      }
    },
    // 对mvid进行处理
    subId (item) {
      if (this.type == 'picUrl' || this.type === 'cover' || this.type === 'imgurl') return item.id
      else if (this.type === 'CoverUrl') {
        return item.data.vid
      }
    },
    // 去mv详情
    toPath (mvid) {
      this.$router.push({ path: '/mvdetails', query: { mvid: mvid } })
    }
  }
}
</script>

<style lang="less" scoped>
.mv-list {
  width: 1200px;
  ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    li {
      display: block;
      float: left;
      width: 260px;
      height: 180px;
      margin-left: 20px;
      position: relative;
      img {
        width: 260px;
        height: 130px;
        border-radius: 4px;
      }
      .isImg {
        width: 220px;
        height: 130px;
      }
      .num {
        position: absolute;
        top: 2px;
        width: 244px;
        height: 30px;
        left: 3%;
        .play {
          line-height: 20px;
          float: right;
          width: auto;
          height: 20px;
          font-size: 12px;
          color: #fff;
          margin-top: 0;
        }
        .cc {
          line-height: 20px;
          float: right;
          width: 20px;
          height: 20px;
        }
      }
      .time {
        position: absolute;
        left: 132px;
        top: 105px;
        width: 120px;
        span {
          width: auto;
          float: right;
          color: #fff;
          font-size: 12px;
        }
      }
      span {
        width: 260px;
        height: 18px;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: #333333;
        display: inline-block;
      }
    }
    .acLi {
      width: 280px;
      height: 190px;
      .acImg {
        width: 280px;
        height: 150px;
        border-radius: 6px;
      }
      .num {
        &.acNum {
          left: 9%;
        }
      }
    }
  }
}
</style>